<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>ExtJS自定义事件</title>
		<%@ include file="../common/taglib.jsp" %>
		<script type="text/javascript" src="${ctx }/js/ext02/event.js"></script>
		<script type="text/javascript">
			Ext.onReady(function() {
				// 创建Person对象
				var person = new Person("张三");
				
				// 添加事件处理函数
				person.on("walk", function() {
					Ext.Msg.alert("event", person.name + "在走啊走。");
				});
				
				person.on("eat", function(breakfast, lunch, supper) {
					Ext.Msg.alert("event", person.name + "要吃" + breakfast + "，" + lunch + "和" + supper + "。");
				});
				
				person.on("sleep", function(time) {
					Ext.Msg.alert("event", person.name + "从" + time.format("H") + "点开始睡觉了。");
				});
				
				// 触发事件
				// Ext.get()返回一个Element对象
				Ext.get("walk").on("click", function() {
					person.fireEvent("walk");
				});
				
				Ext.get("eat").on("click", function() {
					person.fireEvent("eat", "早餐", "午餐", "晚餐");
				});
				
				Ext.get("sleep").on("click", function() {
					person.fireEvent("sleep", new Date());
				});
			});
		</script>
	</head>
	<body>
		<h5>请点击相应按钮</h5>
		<input type="button" id="walk" value="Walk" />&nbsp;
		<input type="button" id="eat" value="Eat" />&nbsp;
		<input type="button" id="sleep" value="Sleep" /> 
	</body>
</html>